<template>
    <div class="menu-select">
        <input class="ctl-menu form-control" id="menuSelection">
        <div class="menu-content hidden clearfix">
            <ul class="menu-list">
                <li :key="l2Key" v-for="(l1Val, l2Key) in category">
                    <a href="javascript:void (0)">{{l2Key}}</a>
                    <ul v-if="typeof l1Val === 'object'">
                        <li  :key="l2Key" v-for="(l2Val, l2Key) in l1Val">
                            <a href="javascript:void (0)">{{l2Key}}</a>
                            <ul v-if="typeof l2Val === 'object'">
                                <li  :key="l3Key" v-for="(l3Val, l3Key) in l2Val">
                                    <a href="javascript:void (0)">{{l3Key}}</a>
                                    <ul v-if="typeof l3Val === 'object'">
                                        <li  :key="l4Key" v-for="(l4Val, l4Key) in l3Val">
                                            <a href="javascript:void (0)">{{l4Key}}</a>
                                            <ul v-if="typeof l4Val === 'object'">
                                                <li  :key="l5Key" v-for="(l5Val, l5Key) in l4Val">
                                                    <a href="javascript:void (0)">{{l5Key}}</a>
                                                    <ul v-if="typeof l5Val === 'object'">
                                                        <li  :key="l6Key" v-for="(l6Val, l6Key) in l5Val">
                                                            <a href="javascript:void (0)">{{l6Key}}</a>
                                                            <input :value="l6Val" class="real-value" type="hidden"/>
                                                        </li>
                                                    </ul>
                                                    <input v-else :value="l5Val" class="real-value" type="hidden"/>
                                                </li>
                                            </ul>
                                            <input v-else :value="l4Val" class="real-value" type="hidden"/>
                                        </li>
                                    </ul>
                                    <input v-else :value="l3Val" class="real-value" type="hidden"/>
                                </li>
                            </ul>
                            <input v-else :value="l2Val" class="real-value" type="hidden"/>
                        </li>
                    </ul>
                    <input v-else :value="l1Val" class="real-value" type="hidden"/>
                </li>
                <li style="visibility: hidden;"><a href="#">test</a></li>
                <li style="visibility: hidden;"><a href="#">test</a></li>
                <li style="visibility: hidden;"><a href="#">test</a></li>
                <li style="visibility: hidden;"><a href="#">test</a></li>
                <li style="visibility: hidden;"><a href="#">test</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    import category from '@/config/IssuesCategory'
    import '@/static/js/plugins/fg.menu/fg.menu.js'
    import '@/static/js/plugins/fg.menu/fg.menu.css'
    export default {
        name: "SelectMenu",
        props: {
            init: {
                type: Boolean,
                default: false,
            }
        },
        created() {
            this.category = category
        },
        mounted() {
            $('.ctl-menu').menu({
                content: $('.menu-content').html(),
                backLink: false,
                onChoose: (val) => {
                    this.$emit('input', val)
                }
            });
        },
        watch: {
            init() {
                if (this.init) {
                    $("#menuSelection").val('')
                }
            }
        }
    }
</script>

<style lang="stylus">
    .ui-widget-content
        border: 1px solid #aaaaaa;
        background: #fff;
        color: #222222;
        z-index : 10000
    .ui-widget-header
        overflow :hidden;
        font-size: 12px;
        border: 1px solid #eee;
        background: #2cabe3;
        color: #fff !important;
        font-weight: bold;
        border-radius :4px;
</style>